<template>
  <div class="wrap">
    <div class="bgWrap">
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          优惠券面值
        </div>
        <div class="inputWrap">
          <input
            type="number"
            name=""
            value=""
            v-model="faceValue"
            placeholder="请输入优惠券面值(元)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          使用门槛
        </div>
        <div class="inputWrap">
          <input
            type="number"
            name=""
            value=""
            v-model="doorSill"
            placeholder="请输入使用门槛(元)"
          />
        </div>
      </div>
      <div class="item5">
        <div class="leftTitle">上架时间</div>
        <div class="radioWrap">
          <div class="chooseList">
            <van-radio-group v-model="radioUp">
              <van-radio
                :name="index"
                checked-color="#000"
                v-for="(item, index) in resRentComboList1"
                :key="index"
                @click="changeUp"
                >{{ item.title }}</van-radio
              >
            </van-radio-group>
          </div>
          <div class="timePicerWrap" @click="showUp = true" v-if="radioUp==1">
            {{ currentDateUp || "请选择上架时间" }}
          </div>
        </div>
      </div>
      <div class="item5">
        <div class="leftTitle">下架时间</div>
        <div class="radioWrap">
          <div class="chooseList">
            <van-radio-group v-model="radioDown">
              <van-radio
                :name="index"
                checked-color="#000"
                v-for="(item, index) in resRentComboList2"
                :key="index"
                @click="changeDown"
                >{{ item.title }}</van-radio
              >
            </van-radio-group>
          </div>
          <div class="timePicerWrap" @click="showDown = true" v-if="radioDown==1">
            {{ currentDateDown || "请选择下架时间" }}
          </div>
        </div>
      </div>
    </div>
    <div class="nextButton" @click="getRentComboList">确定</div>

    <van-popup v-model="showUp" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        type="datetime"
        title="选择上架时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmUp"
        @cancel="showUp = false"
      />
    </van-popup>
    <van-popup v-model="showDown" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        type="datetime"
        title="选择下架时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmDown"
        @cancel="showDown = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { RadioGroup, Radio, DatetimePicker, Popup } from "vant";
import { apiAddShopCoupon } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      showUp: false,
      showDown: false,
      faceValue: "", //优惠面额
      doorSill: "", //使用门槛
      radioUp: 0,
      radioDown: 0,
      resRentComboList1: [
        {
          title: "立即发布",
          id: 0,
        },
        {
          title: "择日发布",
          id: 1,
        },
      ],
      resRentComboList2: [
        {
          title: "永不下架",
          id: 0,
        },
        {
          title: "择日下架",
          id: 1,
        },
      ],
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDateUp: "",
      currentDateDown: "",
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    //确定新增优惠券按钮：
    getRentComboList() {
      var isCurrentUp = true;
      this.radioUp == 0 ? (isCurrentUp = true) : (isCurrentUp = false);
      var isNeverDown = true;
      this.radioDown == 0 ? (isNeverDown = true) : (isNeverDown = false);
      console.log("isCurrentUp-isNeverDown", isCurrentUp - isNeverDown);
      if (this.faceValue == "" || this.doorSill == "") {
        this.$toast.fail("请填写完整信息");
        return;
      } else if (this.radioUp == 1 && this.currentDateUp == "") {
        //选择的择日发布，但是没有选择择日时间
        this.$toast.fail("请选择发布时间");
        return;
      } else if (this.radioDown == 1 && this.currentDateDown == "") {
        //选择的择日下架，但是没有选择择日时间
        this.$toast.fail("请选择下架时间");
        return;
      } else if (this.faceValue > this.doorSill) {
        this.$toast.fail("优惠面额不能大于使用门槛!");
        return;
      }
      apiAddShopCoupon({
        discountsPrice: this.faceValue,
        thresholdPrice: this.doorSill,
        isCurrentUp: isCurrentUp,
        isNeverDown: isNeverDown,
        outTime: !isNeverDown ? this.currentDateDown : "",
        putTime: !isCurrentUp ? this.currentDateUp : "",
      }).then((res) => {
        console.log("新增优惠券res:", res);
        if (res.code == 200) {
          this.$toast.success("优惠券添加成功");
          this.$router.replace({
            path: "/pages/bDsiacountCoupon",
            query: {
              //传递参数
            },
          });
        }
      });
    },
    confirmUp(value) {
      //上架时间
      this.upValue = value
      console.log("时间-上架",  this.upValue.getTime());
      if(this.upValue&&this.downvalue){
        if( this.upValue.getTime()< this.downvalue.getTime()){ //上架时间应该小于下架时间
          this.currentDateUp = this.timeFunction(value);
          this.showUp = false;
        }else{
          this.$toast.fail('上架时间应小于下架时间')
        }
      }else{
        this.currentDateUp = this.timeFunction(value);
         this.showUp = false;
      }
    },
    confirmDown(value) {
      //下架时间  
      this.downvalue = value
      console.log("时间-下架", value.getTime());
      if(this.upValue&&this.downvalue){
        if( this.upValue.getTime()< this.downvalue.getTime()){ //上架时间应该小于下架时间
          this.currentDateDown = this.timeFunction(value);
          this.showDown = false;
        }else{
          this.$toast.fail('下架时间应大于上架时间')
        }
      }else{
        this.currentDateDown = this.timeFunction(value);
         this.showDown = false;
      }
    },
    //中国标准时间转年月日：
    timeFunction(chinaStandard) {
      var date = new Date(chinaStandard);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      let time = y + "-" + m + "-" + d + " " + h + ":" + minute + ":00"; //这里如果不需要小时 分  后边的可以不需要拼接
      return time;
    },
    changeUp(value) {
      console.log("dd1", value, this.radioUp);
    },
    changeDown(value) {
      console.log("dd2", value, this.radioDown);
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
  },
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 20px;
}

input {
  border: 0px;
  background: #f2f4fa;
  width: 85%;
  height: 38px;
  margin-left: 15px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.inputWrap {
  width: 100%;
  background: #f2f4fa;
  height: 40px;
  margin-top: 10px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
.item {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
}
.left {
  float: left;
  margin-top: 30px;
}
.rightWrap {
  float: right;
  margin-top: 7px;
  position: relative;
  right: 7px;
}
.leftImg {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
.deleImg {
  position: absolute;
  width: 15px;
  height: 15px;
  top: -6px;
  right: -4px;
}
.redPoint {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #ff4646;
  border-radius: 50%;
  margin-bottom: 2px;
}
.leftTitle {
  font-size: 13px;
  font-weight: 600;
  color: #181818;
}
.radioWrap {
  overflow: hidden;
  margin-bottom: 10px;
}
.chooseList {
  float: left;
  width: 63%;
}
.timePicerWrap {
  float: right;
  height: 26px;
  line-height: 26px;
  background: #f2f4fa;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 300;
  color: #181818;
  padding: 0px 8px;
  margin-top: 20px;
}
.van-radio-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.van-radio {
  width: 50%;
  margin-top: 24px;
  font-size: 12px !important;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 2.5%;
}
</style>
